import React, { Component } from "react";
import { Tree, Button } from "antd";

const { TreeNode } = Tree;
export default class KeywordReplay extends Component {
	constructor(props) {
		super(props);
		this.state = {
			treeData: [
				{
					title: formatMessage({ id: 'robotAdd.all' }) ,
					key: "0-0",
					children: [
						{
							title: "0-0-0",
							key: "0-0-0",
							children: [
								{ title: "0-0-0-0", key: "0-0-0-0" },
								{ title: "0-0-0-1", key: "0-0-0-1" },
								{ title: "0-0-0-2", key: "0-0-0-2" },
							],
						},
						{
							title: "0-0-1",
							key: "0-0-1",
							children: [
								{ title: "0-0-1-0", key: "0-0-1-0" },
								{ title: "0-0-1-1", key: "0-0-1-1" },
								{ title: "0-0-1-2", key: "0-0-1-2" },
							],
						},
						{
							title: "0-0-2",
							key: "0-0-2",
						},
					],
				},
				{
					title: "0-1",
					key: "0-1",
					children: [
						{ title: "0-1-0-0", key: "0-1-0-0" },
						{ title: "0-1-0-1", key: "0-1-0-1" },
						{ title: "0-1-0-2", key: "0-1-0-2" },
					],
				},
				{
					title: "0-2",
					key: "0-2",
				},
			],
			expandedKeys: ["0-0-0", "0-0-1"],
			autoExpandParent: true,
			checkedKeys: ["0-0-0"],
			selectedKeys: [],
		};
	}

	onExpand = (expandedKeys) => {
		console.log("onExpand", expandedKeys);
		this.setState({
			expandedKeys,
			autoExpandParent: false,
		});
	};

	onCheck = (checkedKeys) => {
		console.log("onCheck", checkedKeys);
		this.setState({ checkedKeys });
	};

	onSelect = (selectedKeys, info) => {
		console.log("onSelect", info);
		this.setState({ selectedKeys });
	};

	renderTreeNodes = (data) =>
		data.map((item) => {
			if (item.children) {
				return (
					<TreeNode title={item.title} key={item.key} dataRef={item}>
						{this.renderTreeNodes(item.children)}
					</TreeNode>
				);
			}
			return <TreeNode key={item.key} {...item} />;
		});

	render() {
		const { treeData } = this.state;
		return (
			<div>
				<Tree
					checkable
					onExpand={this.onExpand}
					expandedKeys={this.state.expandedKeys}
					autoExpandParent={this.state.autoExpandParent}
					onCheck={this.onCheck}
					checkedKeys={this.state.checkedKeys}
					onSelect={this.onSelect}
					selectedKeys={this.state.selectedKeys}
				>
					{this.renderTreeNodes(treeData)}
				</Tree>
				<div style={{ marginTop: 20 }}>
					<Button>取消</Button>
					<Button type='primary' style={{ marginLeft: 10 }}>保存</Button>
				</div>
			</div>
		);
	}
}
